<template>
  <view class="hepan-wrapper" v-if="isShowMsg == 'Y'">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />
    <view class>
      <tui-tab
        :current="current"
        :tabs="tabs"
        :size="30"
        bold
        color="#999"
        selectedColor="#c09351"
        sliderBgColor="#c09351"
        @change="changeTab"
      ></tui-tab>
    </view>

    <view class="bazipaipan-content-wrapper" v-if="data.maleSx">
      <view v-if="current == 0" class="paipan-wrapper">
        <tui-card :title="shenShaTitle">
          <template v-slot:body>
            <view class="pan-row-wrappwe">
              <tui-row>
                <tui-col style="padding:2px 0" :span="24">缘主姓名：{{data.male.name}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">出生公历：{{data.male.gongli}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">生肖：{{data.maleSx}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">星座：{{data.maleXz}}</tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">#</view>
                </tui-col>
                <tui-col :span="5">年柱</tui-col>
                <tui-col :span="5">月柱</tui-col>
                <tui-col :span="5">日柱</tui-col>
                <tui-col :span="5">时柱</tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">
                    <tui-tag type="danger" padding="8rpx" size="24rpx">乾造</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.male.bazi[0]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.male.bazi[1]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.male.bazi[2]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.male.bazi[3]}}</tui-tag>
                  </view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">天干十神</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.tgCgGod[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.tgCgGod[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.tgCgGod[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.tgCgGod[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">藏干</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCg[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCg[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCg[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCg[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">藏干十神</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCgGod[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCgGod[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCgGod[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dzCgGod[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">衰旺</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dayCs[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dayCs[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dayCs[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.male.dayCs[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">
                    <tui-tag type="green" padding="8rpx" size="24rpx">纳音</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.male.naYin[0]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.male.naYin[1]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.male.naYin[2]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.male.naYin[3]}}</tui-tag>
                  </view>
                </tui-col>
              </tui-row>
            </view>
          </template>
        </tui-card>
      </view>

      <view v-if="current == 1" class="paipan-wrapper">
        <tui-card :title="shenShaTitle">
          <template v-slot:body>
            <view class="pan-row-wrappwe">
              <tui-row>
                <tui-col style="padding:2px 0" :span="24">缘主姓名：{{data.female.name}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">出生公历：{{data.female.gongli}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">生肖：{{data.maleSx}}</tui-col>
                <tui-col style="padding:2px 0" :span="24">星座：{{data.maleXz}}</tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">#</view>
                </tui-col>
                <tui-col :span="5">年柱</tui-col>
                <tui-col :span="5">月柱</tui-col>
                <tui-col :span="5">日柱</tui-col>
                <tui-col :span="5">时柱</tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">
                    <tui-tag type="danger" padding="8rpx" size="24rpx">乾造</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.female.bazi[0]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.female.bazi[1]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.female.bazi[2]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="danger" padding="8rpx" size="24rpx">{{data.female.bazi[3]}}</tui-tag>
                  </view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">天干十神</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.tgCgGod[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.tgCgGod[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.tgCgGod[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.tgCgGod[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">藏干</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCg[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCg[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCg[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCg[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">藏干十神</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCgGod[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCgGod[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCgGod[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dzCgGod[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">衰旺</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dayCs[0]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dayCs[1]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dayCs[2]}}</view>
                </tui-col>
                <tui-col :span="5">
                  <view class>{{data.female.dayCs[3]}}</view>
                </tui-col>
              </tui-row>

              <tui-row>
                <tui-col :span="4">
                  <view class="pan-title">
                    <tui-tag type="green" padding="8rpx" size="24rpx">纳音</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.female.naYin[0]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.female.naYin[1]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.female.naYin[2]}}</tui-tag>
                  </view>
                </tui-col>
                <tui-col :span="5">
                  <view class>
                    <tui-tag type="green" padding="8rpx" size="24rpx">{{data.female.naYin[3]}}</tui-tag>
                  </view>
                </tui-col>
              </tui-row>
            </view>
          </template>
        </tui-card>
      </view>

      <view v-if="current == 2" class="paipan-wrapper">
        <view class="hepan-total">
          合盘总分：
          <text class="all_score">{{data.all_score}}</text>
        </view>
        <scroll-view scroll-y class="sv">
          <tui-card class="tul-card" :title="descTitle['minggong']" style="margin-bottom:10px">
            <template v-slot:body>
              <view class="hepan-desc">
                <text>说明：{{data.minggong.description}}</text>
              </view>
              <view class="hepan-detail_description">
                <text>详批：{{data.minggong.detailDescription}}</text>
              </view>
            </template>
          </tui-card>

          <tui-card class="tul-card" :title="descTitle['nianqitongzhi']">
            <template v-slot:body>
              <view class="hepan-desc">
                <text>说明：{{data.nianqitongzhi.description}}</text>
              </view>
              <view class="hepan-detail_description">
                <text>详批：{{data.nianqitongzhi.detailDescription}}</text>
              </view>
            </template>
          </tui-card>

          <tui-card class="tul-card" :title="descTitle['yueling']">
            <template v-slot:body>
              <view class="hepan-desc">
                <text>说明：{{data.yueling.description}}</text>
              </view>
              <view class="hepan-detail_description">
                <text>详批：{{data.yueling.detailDescription}}</text>
              </view>
            </template>
          </tui-card>

          <tui-card class="tul-card" :title="descTitle['rigan']">
            <template v-slot:body>
              <view class="hepan-desc">
                <text>说明：{{data.rigan.description}}</text>
              </view>
              <view class="hepan-detail_description">
                <text>详批：{{data.rigan.detailDescription}}</text>
              </view>
            </template>
          </tui-card>

          <tui-card class="tul-card" :title="descTitle['tiangan']">
            <template v-slot:body>
              <view class="hepan-desc">
                <text>说明：{{data.tiangan.description}}</text>
              </view>
              <view class="hepan-detail_description">
                <text>详批：{{data.tiangan.detailDescription}}</text>
              </view>
            </template>
          </tui-card>

          <tui-card class="tul-card" :title="descTitle['zinv']">
            <template v-slot:body>
              <view class="hepan-desc">
                <text>说明：{{data.zinv.description}}</text>
              </view>
              <view class="hepan-detail_description">
                <text>详批：{{data.zinv.detailDescription}}</text>
              </view>
            </template>
          </tui-card>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { yfghehunApi } from "@/apis/qiuqian.js";
import showPage from '@/utils/showPage'

export default {
  mixins: [showPage],

  data() {
    return {
      current: 0,
      tabs: [
        {
          name: "男方命盘",
          id: 0
        },
        {
          name: "女方命盘",
          id: 1
        },
        {
          name: "合婚结果",
          id: 2
        }
      ],
      shenShaTitle: {
        text: "八字排盘",
        color: "#c09351",
        size: 28
      },

      descTitle: {
        minggong: {
          text: "命宫",
          color: "#c09351",
          size: 28
        },
        nianqitongzhi: {
          text: "年支同气",
          color: "#c09351",
          size: 28
        },
        yueling: {
          text: "月令合",
          color: "#c09351",
          size: 28
        },
        rigan: {
          text: "日干相合",
          color: "#c09351",
          size: 28
        },
        tiangan: {
          text: "天干五合",
          color: "#c09351",
          size: 28
        },
        zinv: {
          text: "子女同步",
          color: "#c09351",
          size: 28
        }
      },

      data: {}
    };
  },
  onLoad(option) {
    let baseFormData = JSON.parse(option.baseFormData); // 字符串转对象
    this.getDataInfo(baseFormData);
  },
  methods: {
    async getDataInfo(baseFormData) {
      let { code, data } = await yfghehunApi(baseFormData);
      if (code == 1) {
        this.data = data;
      }
    },
    changeTab(e) {
      this.current = e.index;
      this.shenShaTitle.text = e.item.name;
    }
  }
};
</script>



<style lang="scss">
.hepan-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  position: relative;
  font-size: 10px;
  overflow: hidden;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .bazipaipan-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .paipan-wrapper {
      margin-top: 16px;
      .hepan-total {
        padding: 0px 20px;
        padding-bottom: 10px;
        .all_score {
          color: #f30;
          font-size: 16px;
        }
      }
      .sv {
        .tul-card {
          .tui-card {
            margin-bottom: 10px;
          }
        }
      }

      .hepan-desc {
        font-size: 13px;
        padding: 4px 8px;
      }
      .hepan-detail_description {
        font-size: 12px;
        padding: 4px 8px;
        color: #888;
      }
      .paipan-list {
        padding: 10px 6px;
        .paipan-item {
          display: flex;
          padding: 4px 0;
          .label {
            font-size: 16px;
            font-weight: 500;
            margin-right: 8px;
          }
        }
      }

      .pan-list-2 {
        overflow-x: auto;
        overflow-y: auto;
        margin-bottom: 20px;
        .dypp-label {
          width: 40px;
        }
      }

      .pan-row-wrappwe {
        padding: 10px 6px;
        font-size: 13px;
        .tui-row__box {
          padding: 6px 0;
          .pan-title {
            font-weight: 500;
          }
          .pan-zhuxing {
            font-size: 15px;
            color: #f30;
          }
        }
      }
    }
  }
}
</style>